<template>
  <div id="container">
    <HeaderQ></HeaderQ>
    <Navigation @searchnavi="searchnavi"></Navigation>
    <div id="wrapList01" class="clearfix">
    <div class="wraplist01 clearfix  myQuestionT" v-cloak>
        <div class="quest-top clearfix">
            <a href="~/faq/NewQuestion?cid=ViewBag.cid" target="_blank" class="ib fl">我要提问</a>
            <div class="fr">
                <span class="c9">共 {{total}} 条 </span>
                <p class="ib tab">
                    <span v-bind:class="type==0?'cur ib':'ib'" v-on:click="choose(0)">全部</span>
                    <span v-bind:class="type==1?'cur ib':'ib'" v-on:click="choose(1)">已解决</span>
                    <span v-bind:class="type==2?'cur ib':'ib'" v-on:click="choose(2)">未解决</span>
                </p>
                <p class="ib sort">
                    <span class="ib sx  border " v-bind:class="order=='tasc'||order=='tdesc'?'selected':''" v-on:click="sort('tdesc')">
                       
                        时间
                        <i v-bind:class="order=='tasc'?'c87b931':'c87b931 hide'">↑</i>
                        <i v-bind:class="order=='tdesc'?'c87b931':'c87b931 hide'">↓</i>
                    </span>
                    <span class="c6 ib sx" v-bind:class="order=='casc'||order=='cdesc'?'selected':''" v-on:click="sort('cdesc')">
                        浏览量
                        <i v-bind:class="order=='casc'?'c87b931':'c87b931 hide'">↑</i>
                        <i v-bind:class="order=='cdesc'?'c87b931':'c87b931 hide'">↓</i>
                    </span>
                    <span class="c6 ib sx" v-bind:class="order=='aasc'||order=='adesc'?'selected':''" v-on:click="sort('adesc')">
                        回复量
                        <i v-bind:class="order=='aasc'?'c87b931':'c87b931 hide'">↑</i>
                        <i v-bind:class="order=='adesc'?'c87b931':'c87b931 hide'">↓</i>
                    </span>
                </p>
            </div>
        </div>

        <div class="clearfix mt20 mb10 quesT" v-for="item in qlist" :key="item.Id">
            <div>
                <p class="zhiD">
                  
                     <router-link :to="{path:'QuestionDetail',query:{qid:item.QuestionId}}" class="h3 ellipsis f5f0" target="_blank">{{item.Title}}</router-link>
                </p>
                <span class="new-t" v-if="item.IsNewShow"></span>
                <span class="old-j" v-if="(item.BestAnswer !=null&&item.BestAnswer!='')"></span>
                <span class="zhi-d" v-if="item.IsTop"></span>
            </div>
            <!-- <p class="c9 text clear">
                <span v-for="tag in item.Tags" :key="tag" class="ib">{{tag.TagName}}</span>
            </p> -->
            <div class="clearfix date mb10">
                <p class="fl clearfix">
                    <span>{{item.CreateTime|datetime("YYYY-MM-DD HH:mm")}}</span>
                    <span><img v-bind:src="item.HeadImg" style="width: 25px"> {{item.RealName}}</span>
                </p>
                <p class="fr clearfix"><span class="fl">{{item.clickNum}}次浏览</span><span class="fr" style="width:120px">{{item.AnswerNum}}个回答
                    <template v-if="item.AnswerNum>0">
                    ({{item.latestAnswer?item.latestAnswer.CreateTime:""|relativeTime}})
                    </template>
                    </span></p>
            </div>
        </div>
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :total="total">
</el-pagination>
      
    </div>
</div>
</div>
</template>




<script>
import Navigation from "./navigation.vue";
import HeaderQ from "../faq/components/header.vue"
import { GetSearchlist} from '@/api/faq'
import '@/styles/main.css'
export default {
    components: {
    Navigation,HeaderQ

  },
    data(){
        return{
            path:"",
            order:"",
            type:0,
            total:0,
            pagecount:10,
            currentPage:1,
            qlist:[]
            
        }
    },
    created() {},
    mounted(){
       
        this.search()
    },
    methods: {    
                handleSizeChange(val) {
                   
                },
                handleCurrentChange(val) {
                    this.currentPage=val
                    this.search(this.type ,this.order)
                    
                },
                searchnavi(){
                     this.currentPage=1
                     this.search()
                }
               ,
                choose: function (type)
                {
                    this.type = type;
                    this.search(this.type ,this.order);
                },
                sort: function (inputorder)
                {
                    if (inputorder === this.order)
                    {
                        this.order = inputorder.indexOf('asc') > -1 ? inputorder.replace('asc', 'desc') : inputorder.replace('desc', 'asc');
                    } else
                    {
                        this.order = inputorder;
                    }
                    this.search(this.type,this.order);
                },
                async search (type,order)
                {   
                   
                    if (order===undefined) {
                        order = this.order;
                    }
                    if (type===undefined) {
                        type = this.type;
                    }
                     var data = await  GetSearchlist({
                         type:this.type,
                         kw:this.kw,
                         sort:this.order,
                         cid:this.$route.query.cid,
                         pageIndex:this.currentPage,
                         pageSize:10,
                         tagid:"",
                     })
                     //console.log(data)
                     this.qlist = data.records ;
                     
                     this.total=data.total;
                     this.currentPage=data.current;                   
                },
              
                htmlDecode:function(str) {
                   // return $('<span/>').html( str ).text();
                   return str
                },
            },
          

}
</script>

<style>

.btn-next,.btn-prev,.el-pagination button, .el-pager li {
   width: 36px;
    height: 36px;
  
    border-radius: 6px !important;  
    display: inline-block;
    vertical-align: text-bottom;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    font-size: 14px;
    line-height: 36px;
}
.el-pagination{
    margin-top: 0px;
}
</style>